<template>
	<view class="control">
		<!-- <view class="con-1"> -->
		<!-- <nav-bar title="审批管理" color="white" bg="rgba(0,0,0,0)"></nav-bar> -->
		<!-- <view class="postion">
				<u-navbar :title="titlename" :bgColor="navBgColor" :titleStyle="{ color: navColor }" fixed>
					<view slot="left"></view>
				</u-navbar>
			</view> -->
		<!-- <view class="bg">
				<image mode="widthFix" src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/5d1ccc3b7ac6cc185130c88a8ac2e90b1eeba707.png"/>
			</view> -->
		<!-- </view> -->
		<view class="con-2">
			<view class="con-3">
				<view class="item" @click="openList(0)">
					<view class="num" style="color: rgb(255,65,5);">24</view>
					<view>待审批</view>
				</view>
				<view class="item" @click="openList(1)">
					<view class="num">24</view>
					<view>已通过</view>
				</view>
				<view class="item" @click="openList(2)">
					<view class="num">24</view>
					<view>未通过</view>
				</view>
				<!-- <view class="tag" @click="openList(0)">
					<text>全部</text>
					<van-icon name="arrow" />
				</view> -->
			</view>
			<view class="con-4 flex-align">
				待审核记录
			</view>
			<view class="list">
				<view class="item" v-for="item in 5" :key="item" @click="openDetail">
					<view>
						<view class="item-title">产品上架</view>
						<view class="detail">
							游泳课程-第二课节 游泳的基本认知
						</view>
					</view>
					<view class="flex-space-between">
						<view class="flex">
							<image mode="aspectFit"
								src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/f1b17f37fac7f668a8c3fcb692915b2e59a0236d.png" />
							<text class="time">王大锤</text>
						</view>
						<view class="time ti">
							2020.11.12 12:30:20
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navBgColor: 'rgba(255, 255, 255, 0)',
				navColor: '#FFFFFF',
				titlename: '审批管理',
			}
		},
		methods: {
			openList(index) {
				uni.navigateTo({
					url: `/page_luckdraw/approval-admin/approval-list?state=${index}`
				})
			},
			openDetail(index) {
				uni.navigateTo({
					url: `/page_luckdraw/approval-admin/approval-process?id=${index}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.control {
		background-color: rgb(243, 243, 243);
		height: 100vh;
		display: flex;
		flex-direction: column;

		.con-1 {
			width: 100%;
			position: relative;

			/deep/ .nav-bar {
				position: fixed;
			}

			.bg {
				width: 100%;
				height: 300rpx;
				background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/5d1ccc3b7ac6cc185130c88a8ac2e90b1eeba707.png");
				background-size: 100%;
				background-position: 50% 80%;
			}
		}

		.con-2 {
			padding: 0 30rpx;
			flex: 1;
			height: 0;
			display: flex;
			flex-direction: column;

			.con-3 {
				padding: 30rpx 40rpx 35rpx 40rpx;
				background-color: rgb(255, 255, 255);
				box-shadow: 0px 0px 13.32rpx 4.68rpx rgba(0, 0, 0, 0.05);
				border-radius: 10rpx;
				display: flex;
				margin-top: 30rpx;
				position: relative;
				justify-content: space-around;

				.tag {
					position: absolute;
					color: #4BA677;
					font-size: 22rpx;
					font-weight: 500;
					right: 20rpx;
					top: 20rpx;
				}

				.item {
					display: flex;
					flex-direction: column;
					color: rgb(136, 136, 136);
					font-size: 24rpx;
					font-weight: 500;
					align-items: center;

					.num {
						color: rgb(51, 51, 51);
						font-size: 32rpx;
						font-weight: 700;
						margin-bottom: 10rpx;
					}
				}
			}

			.con-4 {
				color: rgb(51, 51, 51);
				font-size: 28rpx;
				font-weight: 700;
				margin-top: 40rpx;

				&:before {
					content: '';
					display: block;
					background-color: #4BA677;
					border-radius: 3rpx;
					width: 7rpx;
					height: 35rpx;
					margin-right: 13rpx;
				}
			}

			.list {
				margin-top: 40rpx;
				flex: 1;
				height: 0;
				overflow: auto;

				.item {
					margin-bottom: 20rpx;
					background-color: rgb(255, 255, 255);
					box-shadow: 0px 2rpx 6.86rpx 0.14rpx rgba(0, 0, 0, 0.1);
					border-radius: 10rpx;
					padding: 29rpx 18rpx 30rpx 30rpx;
					height: 280rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.item-title {
						color: rgb(51, 51, 51);
						font-size: 28rpx;
						font-weight: 700;
						margin-bottom: 24rpx;
					}

					.detail {
						line-height: 34rpx;
						color: rgb(102, 102, 102);
						font-size: 26rpx;
						font-weight: 500;
					}

					image {
						width: 18rpx;
						height: 19rpx;
						margin-right: 11rpx;
					}

					.time {
						color: rgb(51, 51, 51);
						font-size: 24rpx;
						font-weight: 500;
					}

					.ti {
						font-weight: 700;
					}
				}
			}
		}
	}
</style>